HTTP,因為是stateless ,屬於不會維持原本狀態的文件。簡單來說,如果需要更新資料就必須透過重新整理才可以使頁面更新,也必須是在重新建立網頁請求,不會保持連線狀態。
因此,HTML5提供了一個可以進行”保持連線”的功能,WebSocket,一個新的雙向溝通技術,透過JacaScript進行與伺服器端溝通的一種連線技術。利用單一socket來與伺服器端請求連線,當完成請求之後,就可以進行雙向溝通了。
想想,AJAX也是透過部分頁面更新(REFRESH),來完成更新這個動作。當我們可以運用WebSocket來進行即時訊息傳遞,我們可以完成很多事情。例如:即時在網頁上溝通並且對於使用者來說只要有瀏覽器即可以進行網路通訊。
簡單來說,傳統http 就像是簡訊,你必須要重新去打開一份訊息(重新整理),但是websocket就像是通話,可以保持連線的,不需要一直重新打開一份訊息。
使用WebSocket的API很簡單,我們只要首先建立一個socket物件即可。
var socket = new WebSocket(“http://欲溝通host”);
接下來就可以進行溝通啦!
首先先了解最基本的四個事件處理。
open : 當socket 連線建立,就會設置好此事件。
message : 當已經建立連線,進行訊息交換事件。 onmessage即表示從server端接收訊息。
error : 當溝通有錯誤,會發生此事件。
close : 當連線關閉時,會發生此事件。
接著就是運用簡單的方法
Send() : 傳遞訊息
<script type="text/javascript">
// 建立 websocket
var ws = new WebSocket("ws://boo-it:9998/");
// 完成建立 websocket
ws.onopen = function()
{
ws.send("欲傳遞的訊息");
};
// 接收來自server端的訊息
ws.onmessage = function (event)
{
var message_from_server = event.data;
alert(message_from_server)
};
ws.onclose = function()
{
// websocket 關閉
};
}
</script>
上述是最簡單的方法,對於寫過網路程式的經驗來說,HTML5提供的網路溝通算是相當的簡單以及方便呢! 也相對地容易寫,應用就非常多了,搭配canvas更可以寫出更多很棒功能、遊戲等。
boo-it 也是因為WebSocket強大的特性以及方便性來嘗試做一個通訊的應用。後面章節會介紹伺服器端WebSocket 如何傳送、接收訊息等溝通。